<template>
  <div class="chapter">
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item label="请求模式" name="formData.method">
          <t-radio-group v-model="formData.ruleContent.mode" size="small" variant="default-filled">
            <t-radio-button value="http">HTTP</t-radio-button>
            <t-radio-button value="webview">WebView</t-radio-button>
          </t-radio-group>
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item
          :label="$t('pages.source.common.header')"
          name="ruleContent.header"
          :help="$t('pages.source.common.mustJson')"
        >
          <steve-textarea v-model:value="formData.ruleContent.header" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item
          :label="$t('pages.source.common.params')"
          name="ruleContent.params"
          :help="$t('pages.source.common.mustJson')"
        >
          <steve-textarea v-model:value="formData.ruleContent.params" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="6">
        <t-form-item :label="$t('pages.source.common.method')" name="ruleContent.method">
          <t-radio-group v-model="formData.ruleContent.method" size="small" variant="default-filled">
            <t-radio-button value="GET">GET</t-radio-button>
            <t-radio-button value="POST">POST</t-radio-button>
          </t-radio-group>
        </t-form-item>
      </t-col>
      <t-col :span="6">
        <t-form-item :label="$t('pages.source.common.engine')" name="ruleContent.engine">
          <t-radio-group v-model="formData.ruleContent.engine" size="small" variant="default-filled">
            <t-radio-button value="xpath">XPATH</t-radio-button>
            <t-radio-button value="jsonpath">JSONPATH</t-radio-button>
          </t-radio-group>
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="6">
        <t-form-item :label="$t('pages.source.common.requestEncode')" name="ruleContent.requestEncode">
          <t-radio-group v-model="formData.ruleContent.requestEncode" size="small" variant="default-filled">
            <t-radio-button value="utf-8">UTF-8</t-radio-button>
            <t-radio-button value="gbk">GBK</t-radio-button>
          </t-radio-group>
        </t-form-item>
      </t-col>
      <t-col :span="6">
        <t-form-item :label="$t('pages.source.common.responseEncode')" name="ruleContent.responseEncode">
          <t-radio-group v-model="formData.ruleContent.responseEncode" size="small" variant="default-filled">
            <t-radio-button value="utf-8">UTF-8</t-radio-button>
            <t-radio-button value="gbk">GBK</t-radio-button>
          </t-radio-group>
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item
          :label="$t('pages.source.common.preRequests')"
          name="ruleContent.preRequests"
          :help="$t('pages.source.common.mustJson')"
        >
          <t-textarea v-model="formData.ruleContent.preRequests" autosize />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.common.request')" :help="$t('pages.source.common.requestHelp')">
          <steve-textarea v-model:value="formData.ruleContent.request" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item
          :label="$t('pages.source.common.response')"
          name="ruleContent.response"
          :help="$t('pages.source.common.responseHelp')"
        >
          <steve-textarea v-model:value="formData.ruleContent.response" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item
          :label="$t('pages.source.common.forbidCookie')"
          name="ruleContent.forbidCookie"
          :help="$t('pages.source.common.forbidCookieHelp')"
        >
          <t-switch v-model="formData.ruleContent.forbidCookie" size="large">
            <template #label="slotProps">{{ slotProps.value ? $t('switchOpen') : $t('switchClose') }}</template>
          </t-switch>
        </t-form-item>
      </t-col>
    </t-row>
    <t-divider align="right">{{ $t('pages.source.ruleContent.contentRule') }}</t-divider>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.ruleContent.chapterContent')" name="ruleContent.contents">
          <steve-textarea v-model:value="formData.ruleContent.contents" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.ruleContent.page')" name="ruleContent.page">
          <steve-textarea v-model:value="formData.ruleContent.page" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item
          :label="$t('pages.source.ruleContent.next')"
          name="ruleContent.next"
          :help="$t('pages.source.ruleContent.pageAndNextHelp')"
        >
          <steve-textarea v-model:value="formData.ruleContent.next" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.ruleContent.filteredContent')" name="ruleContent.cleaner">
          <steve-textarea v-model:value="formData.ruleContent.cleaner" />
        </t-form-item>
      </t-col>
    </t-row>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from 'vue';
import SteveTextarea from '@/components/steveTextarea/index.vue';

const props = defineProps({
  // fromData
  formData: {
    type: Object,
    // eslint-disable-next-line vue/require-valid-default-prop
    default: {},
  },
});

const { formData } = toRefs(props);
</script>

<style lang="less" scoped>
.chapter {
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);

  .row-gap {
    padding-bottom: var(--td-comp-margin-xxl);
  }
}
</style>
